<template>
  <div class="check">
    <van-nav-bar
        title="待收货"
        left-text="返回"
        left-arrow
        />
    <div class="top">
        <img src="../../assets/3_list1.jpg" alt="">
        <span>订单编号</span>
        <p>: 240902-46008...0081</p>
        <div class="copy">复制</div>
    </div>
    <van-divider />
    <div class="bottom">
        <van-icon name="user-o" />
        <span>快递员:</span>
        <p>刘欣</p>
        <div class="phone">拨打电话</div>
    </div>
    <van-divider />
    <div class="footer">
        <van-icon name="logistics" />
        <span>收货地址:</span>
        <span>广东省东莞市东莞市松山湖东莞.. </span>
    </div>
    <van-divider />

    <div class="detail">
        <van-steps direction="vertical" :active="0">
            <van-step>
                <h3>商家已发货,正在通知快递取件</h3>
                <p>2024-09-03: 12:45</p>
            </van-step>
            <van-step>
                <h3>您的订单打包完成</h3>
                <p>2024-09-03: 00:35</p>
            </van-step>
            <van-step>
                <h3>您的订单已验货完成</h3>
                <p>2024-09-03: 00:24</p>
            </van-step>
            <van-step>
                <h3>您的订单开始拣货</h3>
                <p>2024-09-03: 00:15</p>
            </van-step>
            <van-step>
                <h3>商家已打印拣货单</h3>
                <p>2024-09-03: 00:03</p>
            </van-step>
            <van-step>
                <h3>订单确认,已通知商家配货</h3>
                <p>2024-09-02 23:40</p>
            </van-step>
            <van-step>
                <h3>您已提交订单,请等待系统确认</h3>
                <p>2024-09-02 23:37</p>
            </van-step>
            </van-steps>
    </div>
    <van-divider />

  </div>
</template>

<script>
export default {
  name: 'checkLogistics'
}
</script>

<style scoped>
.top {
    display: flex;
    padding-left: 20px;
    padding-top: 20px;
    align-content: center;
}
.top img{
    width: 30px;
    height: 30px;
}
.top span {
    margin-left: 15px;
    line-height: 30px;
    color: #59b13d;
}
.top p{
    line-height: 30px;
}

.bottom {
    display: flex;
    padding-left: 20px;
    padding-top: 5px;
    text-align: center;
}

.bottom span {
    line-height: 17px;
    margin-left: 10px;
}

.bottom p {
    line-height: 17px;
    margin-left: 10px;
}
.phone {
    margin-left: 150px;
    border: #e2e2e2 0.5px solid;
    padding: 5px;
    border-radius: 5px;
    margin-top: -4px;
}
.copy {
    border: #e2e2e2 0.5px solid;
    padding: 2px;
    border-radius: 5px;
    margin-top: 3px;
    margin-left: 10px;
}

.footer {
    display: flex;
    padding-left: 20px;
    padding-top: 5px;
    text-align: center;
}

.footer span {
    line-height: 17px;
    margin-left: 10px;
}

.detail {
    padding-left: 20px;
}
</style>
